<template >
	<!-- 求职记录 -->
	<view class="job-com">
		<view class="jri-tabs">
			<view v-for="(item, index) in tab" :key="index" @click="tabChange(index)">
				<text :class="['jri-name', tabIndex == index ? 'jri-act':'']">{{item.name}}</text>
			</view>
		</view>
		<view class="jri-h"></view>
		<view class="job-list">
			<view class="job-item" v-for="(item,index) in jobList" :key="item.id">
				<view class="job-item-time fs-28">{{item.time}}</view>
				<view class="job-item-record" v-for="(rItem,rIndex) in item.child" :key="rItem.id">
					<view class="job-item-record-title">
						<text class="fs-36">{{rItem.level}}{{rItem.office}}</text>
						<text :class="['textright', 'fs-28', rItem.status===0?'colorRed':'colorBlue']">
							{{rItem.status===0?'停止招聘':rItem.salary}}
						</text>
					</view>
					<view class="job-item-record-info">
						<view class="job-item-record-info-item fs-26">
							<text>{{rItem.comAdd}}</text>
						</view>
						<view class="job-item-record-info-item fs-26">
							<text>{{rItem.education}}</text>
						</view>
						<view class="job-item-record-info-item fs-26">
							<text>{{rItem.experience}}</text>
						</view>
					</view>
					<view class="job-item-record-company fs-28">{{rItem.company}}-{{rItem.office}}</view>
					<view class="job-item-record-user">
						<image src="https://web.suqzp.com/public/v10.png" class="user-logo" mode="aspectFill"></image>
						<view class="flex-1 fs-26">{{rItem.recruiters}}-{{rItem.recOff}}</view>
						<view class="address fc-99 fs-26">{{rItem.recAdd}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				tabIndex: 0,
				tab: [
					{type: 'see', name: '我看过'},
					{type: 'com', name: '沟通过'},
					{type: 'res', name: '已投简历'},
				],
				jobList: [
					{
						id:68748,
						time: '2021年8月17日',
						child: [
							{
								id:6487,
								company: '腾讯科技', 
								office: 'UI设计', 
								comAdd: '广州 白云区',
								education: '本科',
								experience: '3-5年',
								level: '高级',
								recruiters: '林女士',
								recOff: 'CEO',
								recAdd: '广东海珠',
								salary: '1W-1.2W',
								status: 0
							},
							{
								id:1354,
								company: '腾讯科技', 
								office: 'UI设计', 
								comAdd: '广州 白云区',
								education: '本科',
								experience: '3-5年',
								level: '高级',
								recruiters: '林女士',
								recOff: 'CEO',
								recAdd: '广东海珠',
								salary: '1W-1.2W',
								status: 1
							},
						]
					},
					{
						id:9154,
						time: '2021年10月10日',
						child: [
							{
								id:3144,
								company: '腾讯科技', 
								office: 'UI设计', 
								comAdd: '广州 白云区',
								education: '本科',
								experience: '3-5年',
								level: '高级',
								recruiters: '林女士',
								recOff: 'CEO',
								recAdd: '广东海珠',
								salary: '1W-1.2W',
								status: 1
							},
						]
					}
				]
			}
		},
		methods: {
			tabChange(index) {
				this.tabIndex = index
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}
	.job-com{
		width: 100%;
		.jri-tabs {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 86rpx;
			line-height: 86rpx;
			font-size: 28rpx;
			color: #999;
			background: #fff;
			
			.jri-name {
				display: inline-block;
				height: 86rpx;
			}
			
			.jri-act {
				position: relative;
				color: #333333;
				
				&:after {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					content: '';
					width: 80rpx;
					height: 6rpx;
					background: #84C0F4;
					border-radius: 3rpx;
				}
			}
		}
		
		.jri-h {
			height: 86rpx;
		}
		
		.job-list {
			width: 100%;
			.job-item{
				width: 100%;
				
				&-time{
					padding: 20rpx 0 20rpx 32rpx;
					color: #666666;
				}
				
				&-record{
					position: relative;
					padding: 30rpx 34rpx;
					background-color: #FFFFFF;
					
					&-title{
						line-height: 38rpx;
						position: relative;
						
						.textright{
							position: absolute;
							right: 0;
						}
						
						.colorRed{
							color: #FF4D4F;
						}
						
						.colorBlue{
							color: #84C0F4;
						}
					}
					
					&-info{
						margin-top: 22rpx;
						
						&-item{
							display: inline-block;
							margin-right: 8rpx;
							width: 150rpx;
							height: 42rpx;
							line-height: 42rpx;
							background-color: #F5F6F8;
							color: #333333;
							text-align: center;
							border-radius: 10rpx;
						}
					}
					
					&-company{
						margin-top: 28rpx;
					}
					
					&-user{
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 22rpx;
						
						.user-logo{
							width: 46rpx;
							height: 46rpx;
							border-radius: 50%;
							margin-right: 16rpx;
						}
					}
					
					&::after{
						content: '';
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						border: 1rpx solid #F6F6F6;
					}
				}
			}
		}
	}
</style>
